<template>
  <!-- 购买提示 -->
  <div class="purchase">
    <div class="purchase_box">
      <div class="purchase_tips">购买课程</div>
      <div class="purchase_content">课程不能试看,请先购买</div>
      <div class="purchase_button">
        <div>
          <div @click="purchase_close">取消</div>
        </div>
        <div>
          <div @click="purchase_nav">购买课程</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: ''
  },
  data () {
    return {

    }
  },
  methods: {
    purchase_close () {
      this.$emit('PurchaseClose')
    },
    purchase_nav () {
      this.$router.push({
        path: '/coursedetails',
        query: {
          curriculumId: this.type
        }
      })
    }
  }
}
</script>

<style>
.purchase {
  width: 100%;
  height: 100%;
  position: relative;
}
.purchase_box {
  position: absolute;
  left: 40px;
  top: 35vh;
  width: calc(100vw - 80px);
  height: 140px;
  background: white;
  border-radius: 6px;
  text-align: center;
}
.purchase_tips {
  font-size: 18px;
  color: #1a1a1a;
  font-weight: bold;
  margin-top: 15px;
}
.purchase_content {
  font-size: 15px;
  color: #999999;
  margin-top: 15px;
}
.purchase_button {
  display: flex;
}
.purchase_button > div {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.purchase_button > div div {
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  border-radius: 500px;
}
.purchase_button > div:nth-child(1) div {
  border: 1px solid #DA4131;
  color: #DA4131;
}
.purchase_button > div:nth-child(2) div {
  background: #DA4131;
  color: white;
}
</style>
